<template>
	<view class="p-4">
		<view class="flex flex-column grid-gap-4">
			<view class="bg-white rounded-4 px-4  flex flex-center">
				<view class="w-100px h9 text-grey">收款人</view>
				<input type="text" placeholder="请输入收款人" v-model="form.name" class="flex-1 p-4">
			</view>
			<view class="bg-white rounded-4 px-4 flex flex-center">
				<view class="w-100px h9 text-grey">联系电话</view>
				<input type="tel" placeholder="请输入联系电话" v-model="form.mobile" maxlength="11" class="flex-1 p-4">
			</view>
			<view class="bg-white rounded-4 px-4 flex flex-y-center"
				v-if="['alipay_payment_code', 'wechat_payment_code'].includes(form.channels)">
				<view class="w-100px h9 text-grey">收款码</view>
				<view class="flex flex-x-flex-start py-4" @tap="chooseImage">
					<image class="qrcode" :src="form.qrcode" mode="" v-if="form.qrcode"></image>
					<view class="qrcode flex flex-center" v-else>
						<uni-icons type="plusempty" :size="70" color="var(--xl-placeholder)" />
					</view>
				</view>
			</view>
			<view class="bg-white rounded-4 px-4 flex flex-center" v-if="['bank_transfer'].includes(form.channels)">
				<view class="w-100px h9 text-grey">银行卡号</view>
				<input type="card" placeholder="请输入银行卡号" v-model="account" @input="formatAccount" maxlength="23"
					class="flex-1 p-4">
			</view>
			<view class="bg-white rounded-4 px-4 flex flex-center" v-if="['bank_transfer'].includes(form.channels)">
				<view class="w-100px h9 text-grey">开户行</view>
				<input type="text" placeholder="请输入开户行" v-model="form.bank" class="flex-1 p-4">
			</view>

			<view class="flex"
				v-if="['wechat_transfer'].includes(form.channels) && !USERINFO.mp_openid && !USERINFO.openid">
				<button class="flex-1 btn-primary btn-round" disabled>请先绑定微信</button>
			</view>
			<view class="flex" v-else>
				<button class="flex-1 btn-primary btn-round" @tap="submit()">提交</button>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref,nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore, useRefs } from "@/stores";
import { $page, $api, $message } from "@/utils";
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const loading = ref(false);
const form = ref({
	channels: '',
	name: '',
	mobile: '',
	qrcode: '',
	account: '',
	bank: ''
});
const account = ref('');
const formatAccount = () => {
	let s = account.value.replace(/\D/g, '');
	form.value.account = s;
	// 格式化银行卡号: 4位一空格
	s = s.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
	account.value = s;
}
const submit = () => {
	uni.showLoading({ title: '保存中...' });
	$api.UserFinanceAccount.save(form.value).then((res: any) => {
		uni.hideLoading();
		$message.success(res.msg);
		nextTick(() => {
			$page.back();
		});
	}).catch((err: any) => {
		uni.hideLoading();
		$message.error(err.msg);
	})
}
const chooseImage = () => {
	$api.Upload.chooseImage()
		.then((res: any) => {
			form.value.qrcode = res.data.url
		}).catch((err: any) => {
			$message.error(err.msg);
		})
}
onLoad((options: any) => {
	if (options.channels) {
		form.value.channels = options.channels;
		loading.value = true;
		$api.UserFinanceAccount.index().then((data: any) => {
			for (const key in data) {
				if (key === options.channels) {
					if (Object.hasOwnProperty.call(data, key)) {
						form.value = data[key];
						if (form.value.channels === 'bank_transfer') {
							account.value = form.value.account;
							form.valueatAccount();
						}
						break;
					}
				}
			}
		}).finally(() => {
			loading.value = false;
		});
	} else {
		uni.showModal({
			title: '提示',
			content: '参数错误',
			showCancel: false,
			success: () => {
				$page.back();
			}
		});
	}
})
</script>
<style lang="scss" scoped>
.w-100px {
	width: 100px;
}

.qrcode {
	background-color: $uni-bg-color-grey;
	width: 40vw;
	height: 60vw;
}
</style>
